﻿<template>
  <div class="finance-report-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">馃挵 财务报表分析</span>
          <div class="header-actions">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" size="small" />
            <el-button type="primary" @click="handleRefresh">刷新</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20" class="kpi-row">
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #67c23a;">
            <div class="kpi-label">总收入</div>
            <div class="kpi-value">楼{{ totalIncome.toLocaleString() }}</div>
            <div class="kpi-trend up">环比 +{{ incomeGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #f56c6c;">
            <div class="kpi-label">总支出</div>
            <div class="kpi-value">楼{{ totalExpense.toLocaleString() }}</div>
            <div class="kpi-trend">环比 +{{ expenseGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #409eff;">
            <div class="kpi-label">净利润</div>
            <div class="kpi-value">楼{{ netProfit.toLocaleString() }}</div>
            <div class="kpi-trend up">环比 +{{ profitGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #e6a23c;">
            <div class="kpi-label">利润率</div>
            <div class="kpi-value">{{ profitMargin }}%</div>
            <div class="kpi-trend up">环比 +{{ marginGrowth }}%</div>
          </div>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搳 收支趋势分析</span>
        </template>
        <div class="chart-container" ref="trendChart"></div>
      </el-card>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃挼 收入结构</span>
            </template>
            <div class="chart-container" ref="incomeChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃捀 支出结构</span>
            </template>
            <div class="chart-container" ref="expenseChart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搵 财务明细数据</span>
        </template>
        <el-table :data="financeData" border stripe>
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="income" label="收入" width="150">
            <template #default="{ row }">
              <span style="color: #67c23a;">楼{{ row.income.toLocaleString() }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expense" label="支出" width="150">
            <template #default="{ row }">
              <span style="color: #f56c6c;">楼{{ row.expense.toLocaleString() }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="profit" label="利润" width="150">
            <template #default="{ row }">
              <span :style="{ color: row.profit > 0 ? '#409eff' : '#f56c6c' }">
                楼{{ row.profit.toLocaleString() }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="profitMargin" label="利润率" width="100" />
          <el-table-column prop="notes" label="备注" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const dateRange = ref([])
const totalIncome = ref(2567890)
const incomeGrowth = ref(15.8)
const totalExpense = ref(1890456)
const expenseGrowth = ref(8.5)
const netProfit = ref(677434)
const profitGrowth = ref(25.3)
const profitMargin = ref(26.4)
const marginGrowth = ref(2.1)

const financeData = ref([
  { date: '2024-01-20', income: 567890, expense: 412345, profit: 155545, profitMargin: '27.4%', notes: '正常营业' },
  { date: '2024-01-19', income: 534210, expense: 389012, profit: 145198, profitMargin: '27.2%', notes: '正常营业' }
])

const trendChart = ref(null)
const incomeChart = ref(null)
const expenseChart = ref(null)

onMounted(() => {
  initTrendChart()
  initIncomeChart()
  initExpenseChart()
})

const initTrendChart = () => {
  const chart = echarts.init(trendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['收入', '支出', '利润'] },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
    yAxis: { type: 'value', name: '金额(万元)' },
    series: [
      { name: '收入', type: 'bar', data: [256, 278, 289, 265, 298, 312, 334], itemStyle: { color: '#67c23a' } },
      { name: '支出', type: 'bar', data: [189, 198, 212, 195, 218, 229, 245], itemStyle: { color: '#f56c6c' } },
      { name: '利润', type: 'line', data: [67, 80, 77, 70, 80, 83, 89], itemStyle: { color: '#409eff' } }
    ]
  })
}

const initIncomeChart = () => {
  const chart = echarts.init(incomeChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      name: '收入来源',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 1567890, name: '销售收入' },
        { value: 456789, name: '服务收入' },
        { value: 234567, name: '会员充值' },
        { value: 123456, name: '其他收入' }
      ]
    }]
  })
}

const initExpenseChart = () => {
  const chart = echarts.init(expenseChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      name: '支出类型',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 890456, name: '采购成本' },
        { value: 345678, name: '人工成本' },
        { value: 234567, name: '租金水电' },
        { value: 156789, name: '营销费用' },
        { value: 123456, name: '其他支出' }
      ]
    }]
  })
}

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.finance-report-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  padding: 24px;
  background: white;
  border-radius: 8px;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.kpi-trend {
  font-size: 14px;
  color: #606266;
}

.kpi-trend.up {
  color: #67c23a;
}

.chart-container {
  height: 400px;
}
</style>
